<template>
  <div>
    <el-page-header @back="goBack"
      :content="dictObj.item.dictName">
    </el-page-header>
    <div class="div-query"
      style="margin-top: 20px">
      <div class="collapse">
        <div class="collapse-header"
          @click="panelActive = !panelActive">
          <i class="collapse-header-icon"
            :class="[
              panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
            ]" />
          {{ panelActive ? '隐藏' : '展开' }}查询条件
        </div>
        <div class="collapse-content">
          <el-collapse-transition>
            <div v-show="panelActive">
              <el-form size="small"
                label-position="right">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="属性名称"
                      label-width="80px">
                      <el-input v-model="searchModel.dictText"
                        placeholder="输入属性名称"
                        clearable
                        class="filter-item search-item" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item style="margin-left: 10px">
                      <el-button type="primary"
                        size="small"
                        icon="el-icon-search"
                        @click="toSearch"
                        style="margin-right: 10px">搜素</el-button>
                      <el-button type="info"
                        size="small"
                        icon="el-icon-delete"
                        @click="toReset"
                        style="margin-right: 10px">重置</el-button>
                      <el-button size="small"
                        @click="getDataList">
                        <i class="el-icon-refresh"
                          style="color: #606266" />
                        <span style="color: #606266">刷新</span>
                      </el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-transition>
        </div>
      </div>
    </div>
    <div>
      <el-button size="small"
        type="primary"
        style="display: inline; margin-right: 10px"
        @click="toAdd({ dictValueId: -1 }, 'add')">
        <i class="iconfont icon-xinzenghuizong"
          style="font-size: 13px; margin-right: 5px" />添加属性
      </el-button>

      <div v-if="selectedDataList.length != 0"
        class="alert-div">
        <i class="el-icon-info"
          style="color: #1890ff; margin-right: 3px" />
        已选择
        <strong style="color: #1890ff; margin: 0px 1px; font-size: 15px">
          {{ selectedDataList.length }}
        </strong>
        项
        <el-button type="text"
          style="padding: 10px"
          @click="toEmptySelection">清空</el-button>
      </div>

      <el-popover v-model="popoverVisible"
        placement="top"
        trigger="manual">
        <i class="el-icon-question"
          style="color: rgb(255, 153, 0)" />
        <span>
          确定要删除已选的
          <strong style="color: #1890ff; margin: 0px 1px">
            {{ selectedDataList.length }}
          </strong>
          项数据吗？
        </span>
        <div style="text-align: right; margin-top: 10px">
          <el-button size="mini"
            type="text"
            @click="popoverVisible = false">取消</el-button>
          <el-button type="primary"
            size="mini"
            @click="toBatchDeleteConfirm">确定</el-button>
        </div>

        <el-button slot="reference"
          size="small"
          type="danger"
          icon="el-icon-delete"
          style="margin-bottom: 8px"
          @click="toBatchDelete">
          批量删除
        </el-button>
      </el-popover>

      <el-table ref="elTable"
        v-loading="loading || deleteLoading"
        border
        fit
        size="medium"
        :data="dataList"
        :row-key="(row) => row.dictValueId"
        style="width: 100%"
        :element-loading-text="deleteLoading ? '删除中,请等待...' : ''"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange">
        <el-table-column align="center"
          type="selection"
          width="40"
          fixed
          :reserve-selection="true" />
        <el-table-column align="center"
          label="属性名称"
          prop="dictText" />
        <el-table-column align="center"
          label="属性值"
          prop="dictValue" />
        <el-table-column align="center"
          label="操作区"
          fixed="right">
          <template slot-scope="{ row, $index }">
            <el-tooltip effect="dark"
              content="编辑"
              placement="top-start">
              <i class="iconfont icon-bianji2 i-edit"
                @click="toAdd(row, 'edit')" />
            </el-tooltip>
            <i class="iconfont icon-fengefu i-fengefu" />

            <el-tooltip effect="dark"
              content="删除"
              placement="top-start">
              <el-popconfirm :title="'确定删除【' + row.dictText + '】该属性吗？'"
                placement="top"
                @confirm="toSingleDelete(row, $index, '确定')"
                @cancel="toSingleDelete(row, $index, '取消')">
                <i class="iconfont icon-shanchu i-delete"
                  slot="reference" />
              </el-popconfirm>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0"
        :total="total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        :page-sizes="pageSizeOptions"
        @pagination="getDataList" />
    </div>

    <dictionary-Properties-add v-if="addDialogObj.isVisible"
      ref="addDialog"
      :dialog-visible="addDialogObj.isVisible"
      :title="addDialogObj.title"
      :params="params"
      :dictObj="dictObj"
      @close="dialogClose('addDialogObj')"
      @submit="afterSubmit" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import dataTableMixins from '@/mixins/data-table-mixins'
import systemManageApi from '@/api/system-manage'
import DictionaryPropertiesAdd from './PropertiesAdd'

export default {
  name: 'DictionaryProperties',
  components: {
    Pagination,
    DictionaryPropertiesAdd,
  },
  mixins: [dataTableMixins],
  props: {
    dictObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data () {
    return {
      deleteLoading: false,
      popoverVisible: false,
    }
  },
  created () { },
  mounted () {
    this.getDataList()
  },
  methods: {
    goBack () {
      this.$emit('goBack')
    },
    getDataList () {
      this.loading = true
      const searchModel = this.formatSearchData(this.searchModel)
      const queryData = {
        dictId: this.dictObj.item.dictId,
        fieldName: this.dictObj.item.fieldName,
        tableName: this.dictObj.item.tableName,
      }
      systemManageApi
        .getDictValueList({
          ...this.pagination,
          ...searchModel,
          ...this.sort,
          ...queryData,
        })
        .then((ret) => {
          this.dataList = ret.data.data.rows

          this.dataList.forEach((ele, i) => {
            this.selectedDataList.forEach((multEle, j) => {
              if (
                this.dataList[i].dictValueId ===
                this.selectedDataList[j].dictValueId
              ) {
                this.$refs.elTable.toggleRowSelection(this.dataList[i], true)
              }
            })
          })
          this.total = ret.data.data.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch () {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset () {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.toSearch()
    },
    onSortChange (val) {
      console.log(val)
      this.sort.field = val.prop
      this.sort.order = val.order
      this.toSearch()
    },
    onSelectionChange (selection) {
      this.selectedDataList = selection
    },
    toEmptySelection () {
      this.$refs.elTable.clearSelection()
    },
    indexMethod (index) {
      return this.formatIndex(index, this.pagination)
    },
    toBatchDelete () {
      if (this.selectedDataList.length === 0) {
        this.$message({
          message: '请先选择需要删除的数据',
          type: 'warning',
          duration: 4000,
        })
        return
      } else {
        this.popoverVisible = true
      }
    },
    toBatchDeleteConfirm () {
      this.popoverVisible = false
      const ids = []
      this.selectedDataList.forEach((ele) => {
        ids.push(ele.dictValueId)
      })
      this.deleteConfirm(ids)
    },
    toSingleDelete (data, index, type) {
      console.log('c')
      if (type === '确定') {
        const ids = []
        ids.push(data.dictValueId)
        this.deleteConfirm(ids, '')
      }
    },
    deleteConfirm (ids) {
      console.log('删除ids', ids)
      this.deleteLoading = true
      systemManageApi
        .deleteDictValue(ids)
        .then(() => {
          this.$message.success('删除成功！')
          this.deleteLoading = false
          this.toEmptySelection()
          this.toReset()
        })
        .catch(() => {
          this.deleteLoading = false
        })
    },
    toAdd (data, type) {
      this.params = {
        item: data,
        type: type,
      }
      console.log(this.params)

      this.addDialogObj.title =
        type === 'add'
          ? `字典管理 ＞${this.dictObj.item.dictName} ＞添加属性`
          : `字典管理 ＞${this.dictObj.item.dictName} ＞编辑属性`
      this.addDialogObj.isVisible = true
    },
    afterSubmit (operationType) {
      if (operationType === 'add') {
        this.toReset()
      } else {
        this.getDataList()
      }
      this.dialogClose('addDialogObj')
    },
  },
}
</script>
<style lang="scss"  scoped>
@import '../../../../../styles/part-custom';
</style>